<template>  
  <div class="water-quality">  
    <!-- 标题部分 -->  
    <div class="header">  
      <!-- <div class="icon">  
        <img src="@/assets/images/header-icon.png" alt="监测图标" />  
      </div>   -->
      <div class="title">水质监测</div>  
      <div class="status"></div>  
    </div>  

    <!-- 数据部分 -->  
    <div class="content">  
      <div class="data-item">  
        <div class="icon-arrow">  
          <img class="data-icon" src="@/assets/images/images/icon.png" alt="COD" />  
          <div class="arrow"></div>  
        </div>  
        <div class="info">  
          <div class="label">COD</div>  
          <div class="value">2141</div>  
        </div>  
      </div>  
      <div class="data-item">  
        <div class="icon-arrow">  
          <img class="data-icon" src="@/assets/images/images/icon.png" alt="氨氮" />  
          <div class="arrow"></div>  
        </div>  
        <div class="info">  
          <div class="label">氨氮</div>  
          <div class="value">2141</div>  
        </div>  
      </div>  
      <div class="data-item">  
        <div class="icon-arrow">  
          <img class="data-icon" src="@/assets/images/images/icon.png" alt="总氮" />  
          <div class="arrow"></div>  
        </div>  
        <div class="info">  
          <div class="label">总氮</div>  
          <div class="value">2141</div>  
        </div>  
      </div>  
      <div class="data-item">  
        <div class="icon-arrow">  
          <img class="data-icon" src="@/assets/images/images/icon.png" alt="PH" />  
          <div class="arrow"></div>  
        </div>  
        <div class="info">  
          <div class="label">PH</div>  
          <div class="value">2141</div>  
        </div>  
      </div>  
    </div>  
  </div>  
</template>  

<script>  
export default {  
  name: "WaterQualityMonitor",  
  mounted() {  
    // 页面加载时初始化调整宽高  
    this.updateComponentSize();  

    // 监听窗口变化并调整组件大小  
    window.addEventListener("resize", this.updateComponentSize);  
  },  
  beforeDestroy() {  
    // 组件销毁时移除监听器，避免内存泄漏  
    window.removeEventListener("resize", this.updateComponentSize);  
  },  
  methods: {  
    updateComponentSize() {  
      // 获取父容器大小，并设置自身宽高  
      const parent = this.$el.parentNode; // 获取父元素  
      if (parent) {  
        this.$el.style.width = `${parent.offsetWidth}px`;  
        this.$el.style.height = `${parent.offsetHeight}px`;  
      }  
    },  
  },  
};  
</script> 

<style scoped>  
/* 主容器样式 */  
.water-quality {  
  width: 75%; /* 宽度由父容器控制 */  
  height: 200px; /* 高度由父容器控制 */  
  padding: 15px;  
  border-radius: 12px;  
  background: rgba(0, 20, 40, 0.9);  
  border: 1px solid rgba(0, 183, 255, 0.7);  
  box-shadow: 0 0 15px rgba(0, 183, 255, 0.5);  
  font-family: Arial, sans-serif;  
  position: relative;  
  color: #fff;   
}  

/* 标题部分 */  
.header {  
  display: flex;  
  align-items: center;  
  margin-bottom: 15px;  
}  

.header .icon img {  
  width: 20px;  
  height: 20px;  
  margin-right: 8px;  
  filter: drop-shadow(0 0 5px rgba(0, 183, 255, 0.8));  
}  

.title {  
  flex-grow: 1;  
  text-transform: uppercase;  
  font-size: 16px;  
  font-weight: bold;  
  color: #00b7ff;  
  align-items: center;  
}  

.status {  
  flex-grow: 1;  
  height: 1px;  
  margin-left: 8px;  
  background: repeating-linear-gradient(  
    90deg,  
    rgba(0, 183, 255, 0.5) 0,  
    rgba(0, 183, 255, 0.5) 5px,  
    transparent 5px,  
    transparent 10px  
  );  
}  

/* 数据部分 */  
.content {  
  display: grid;  
  grid-template-columns: 1fr 1fr;  
  gap: 10px;  
}  

.data-item {  
  display: flex;  
  align-items: center;  
  background: rgba(0, 183, 255, 0.1);  
  border-radius: 10px;  
  padding: 10px;  
  box-shadow: 0 0 10px rgba(0, 183, 255, 0.15);  
  position: relative;  
}  

/* 图标及箭头样式 */  
.icon-arrow {  
  position: relative;  
  display: flex;  
  align-items: center;  
  margin-right: 15px;  
}  

.data-icon {  
  width: 40px;  
  height: 40px;  
  border-radius: 50%;  
  object-fit: contain;  
  border: 2px solid rgba(0, 183, 255, 0.5);  
  background: rgba(0, 183, 255, 0.2);  
  box-shadow: 0 0 10px rgba(0, 183, 255, 0.6);  
}  

.arrow {  
  width: 30px;  
  height: 2px;  
  background: #00b7ff;  
  transform: rotate(0deg);  
  margin-left: 8px;  
  position: relative;  
}  

.arrow::after {  
  content: "";  
  width: 6px;  
  height: 6px;  
  border-right: 2px solid #00b7ff;  
  border-bottom: 2px solid #00b7ff;  
  position: absolute;  
  top: -3px;  
  right: -5px;  
  transform: rotate(45deg);  
}  

/* 监测项文字样式 */  
.info {  
  display: flex;  
  flex-direction: column;  
  align-items: flex-start;  
}  

.label {  
  font-size: 14px;  
  font-weight: bold;  
  color: #00b7ff;  
  margin-bottom: 5px;  
  text-transform: uppercase;  
}  

.value {  
  font-size: 18px;  
  font-weight: bold;  
  color: #fff;  
  text-shadow: 0 0 5px rgba(0, 183, 255, 0.8);  
}  
</style>